<template>
	<view class="Box">
		<u-navbar :autoBack="false" title="我的订单" @leftClick="leftClick">
		</u-navbar>
		<view class="tabsBox">
			<u-tabs :activeStyle="{
			    color: '#4186f5',
				fontSize:'28rpx',
			    fontWeight: '800',
			    transform: 'scale(1)'
			}" :current="current" :inactiveStyle="{
				        color: '#606266',
						fontSize:'28rpx',
				        transform: 'scale(1)'
				    }" :list="tabs" @change="orderEvent"></u-tabs>
		</view>
		<view class="orderList">
			<view v-for="(item,index) in tableData" :key="index" class="">
				<view class="orderItem" @click="orderClick(item)">
					<view class="itemTop">
						<image :src="item.img" class="orderImg">
						</image>
						<view class="informationBox">
							<view class="proposalName">
								{{ item.proposalName }}
							</view>
							<view v-if="item.lineType" class="strokeBox">
								<view v-if="item.lineType == 0" class="orderLineType">
									自建线路
								</view>
								<view v-else-if="item.lineType == 1" class="orderLineType">
									跟团游
								</view>
								<view v-else-if="item.lineType == 2" class="orderLineType">
									拼团游
								</view>
								<view v-else-if="item.lineType == 3" class="orderLineType">
									研学路线
								</view>
								<view v-else-if="item.lineType == 4" class="orderLineType">
									亲子团游
								</view>
								<view v-else-if="item.lineType == 5" class="orderLineType">
									自助亲朋
								</view>
								<view class="">
									{{ item.scenicCount }}个景点
								</view>
								<view class="verticalLine">
									|
								</view>
								<view class="">
									{{ item.taskCount }}个任务
								</view>
								<view class="verticalLine">
									|
								</view>
								全程{{ Math.ceil(item.distance / 100) / 10 }}km
							</view>
							<view v-else class="productQuantity">
								X{{ item.payCount }}
							</view>
							<view v-if="!item.lineType" class="">
								<view v-if="item.orderStatus == 1" class="WriteOffBox"
									@click.stop="WriteOffClick(item,1)">
									<image class="WriteOffImg"
										src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/WriteOffOne.png">
										<view class="WriteOffText">
											查看核销码
										</view>
								</view>
								<view v-if="item.orderStatus == 2" class="WriteOffBox"
									@click.stop="WriteOffClick(item,2)">
									<image class="WriteOffImg"
										src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/WriteOffTwo.png">
										<view class="WriteOffText">
											已核销
										</view>
								</view>
							</view>
						</view>
					</view>
					<view class="itemBottom">
						<view v-if="item.orderStatus == 0" class="orderStatusOne">
							未付款
						</view>
						<view v-if="item.orderStatus == 1" class="orderStatusTwo">
							待使用
						</view>
						<view v-if="item.orderStatus == 2" class="orderStatusThree">
							已完成
						</view>
						<view v-if="item.orderStatus == 3" class="orderStatusFour">
							售后
						</view>
						<view v-if="item.orderStatus == 6" class="orderStatusFive">
							取消
						</view>
						<view v-if="item.orderStatus == 7" class="orderStatusFive">
							待成团
						</view>
						<view class="moneyBox">
							<view class="text">
								合计:
							</view>
							<view class="money">
								￥{{ item.amountPayable }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="WriteOffShow" :showConfirmButton="false">
			<view class="WriteOffModal">
				<image class="closeImg"
					src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/writeOffClose.png"
					@click="WriteOffClose">
					<view class="WriteOffTitle">
						商品核销码
					</view>
					<view class="imgBox">
						<img v-if="imgData" :src="imgData" alt="" class="WriteOffImg" />
						<u-loading-icon v-else></u-loading-icon>
					</view>

			</view>
		</u-modal>

		<view class="block5">
			<view v-if="tableData.length < total" class="">
				<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
			</view>

			<view v-else class="noMore">
				<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		lineOrderList,
		gainQrcode,
	} from "@/api/challenge";

	export default {
		data() {
			return {
				total: 0,
				WriteOffShow: false,
				imgData: "",
				tabs: [{
						name: '全部',
					},
					{
						name: '未付款'
					},
					{
						name: '待成团'
					},
					{
						name: '待使用',
					},
					{
						name: '已完成'
					},
					{
						name: '退款售后',
					}
				],
				current: 0,
				objData: {
					tel: '',
					status: '',
					pageNumber: 1,
					pageSize: 10
				},
				tableData: []
			}
		},
		onLoad(data) {
			if (data.type == 0) {
				this.current = 1
			} else if (data.type == 1) {
				this.current = 3
			} else if (data.type == 2) {
				this.current = 5
			} else if (data.type == 3) {
				this.current = 0
			}
			this.objData.tel = uni.getStorageSync("userinfo").phone
			this.lineOrderListEvent()
		},
		onShow() {
			this.objData.pageNumber = 1
			this.lineOrderListEvent()
		},
		onReachBottom() {
			this.objData.pageNumber += 1
			this.lineOrderListEvent()
		},
		methods: {
			leftClick() {
				uni.switchTab({
					url: "/pages/my/index"
				});
			},
			loadmore() {
				this.objData.pageNumber += 1
				this.lineOrderListEvent()
			},
			WriteOffClose() {
				this.WriteOffShow = false
			},
			WriteOffClick(data, index) {
				this.imgData = ""
				if (index == 1) {
					this.WriteOffShow = true
					gainQrcode({
						skipUrl: "pages/my/orderList/productVerification",
						scene: data.id,
						// // 聚力
						appId: "wx5b3843197d34d53b",
					}).then((res) => {
						this.imgData = "data:image/png;base64," + res;
					});
				}
			},
			orderClick(data) {
				if (data.lineType) {
					uni.navigateTo({
						url: '/pages/my/orderList/orderDetails?id=' + data.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/my/orderList/commodityOrder?id=' + data.id + '&orderStatus=' + data
							.orderStatus
					});

				}

			},
			orderEvent(data) {
				if (data) {
					this.current = data.index
				}
				this.objData.pageNumber = 1
				this.lineOrderListEvent()
			},
			lineOrderListEvent() {
				if (this.current == 0) {
					this.objData.status = ""
				} else {
					if (this.current == 1) {
						this.objData.status = 0
					} else if (this.current == 2) {
						this.objData.status = 7
					} else if (this.current == 3) {
						this.objData.status = 1
					} else if (this.current == 4) {
						this.objData.status = 2
					} else if (this.current == 5) {
						this.objData.status = 3
					}
				}
				lineOrderList(this.objData).then(res => {
					if (this.objData.pageNumber > 1) {
						res.records.forEach(item => {
							this.tableData.push(item)
						})
						this.total = res.total
					} else {
						this.tableData = res.records
						this.total = res.total
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
		font-family: PingFang SC, PingFang SC-Heavy;
	}


	.tabsBox {
		background: #fff;
		padding-bottom: 12rpx;
		margin-top: 160rpx;
	}


	.orderList {
		.orderItem {
			margin: 32rpx 32rpx 0 32rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.itemTop {
				display: flex;
				padding: 20rpx 0 20rpx 20rpx;
				border-bottom: 2rpx solid #eeeeee;
				position: relative;

				.orderImg {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}

				.informationBox {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 4rpx 0 6rpx 0;

					.proposalName {
						font-weight: 800;
					}

					.strokeBox {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.orderLineType {
							padding: 0rpx 8rpx;
							border: 1px solid #4186f5;
							border-radius: 8rpx;
							color: #4186f5;
							margin-right: 10rpx;
						}

						.verticalLine {
							margin: 0 6rpx;
						}
					}

					.productQuantity {
						margin-bottom: 30rpx;
					}

					.WriteOffBox {
						width: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: absolute;
						top: 34rpx;
						right: 40rpx;

						.WriteOffImg {
							width: 96rpx;
							height: 96rpx;
						}

						.WriteOffText {
							margin-top: 8rpx;
							font-size: 24rpx;
							color: #757575;
						}
					}
				}
			}

			.itemBottom {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				font-weight: 800;

				.orderStatusOne {
					color: #ff9802;
				}

				.orderStatusTwo {
					color: #4186f5;
				}

				.orderStatusThree {
					color: #28b78d;
				}

				.orderStatusFour {
					color: #ff5e5e;
				}

				.orderStatusFive {
					color: #757575;
				}

				.moneyBox {
					display: flex;
					color: #ff5e5e;

					.text {
						margin-right: 16rpx;
					}

					.money {}
				}
			}

		}
	}

	.WriteOffModal {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.closeImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: -15rpx;
			right: 0;
		}

		.WriteOffTitle {
			font-size: 40rpx;
			font-weight: 800;
			margin-bottom: 40rpx;
		}

		.imgBox {
			width: 300rpx;
			height: 300rpx;
		}

		.WriteOffImg {
			width: 300rpx;
			height: 300rpx;
		}
	}


	.block5 {
		width: 100%;
		display: flex;
		/* 使用Flexbox布局 */
		flex-direction: column;
		/* 设置为垂直方向 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 400rpx;
		/* 确保有足够的高度，根据需要调整高度 */
		background-color: #F2F2F2;

		.noMore {
			width: 100%;
			text-align: center;
		}
	}
</style>